<template>
  <div id="app">
    <!-- <vue-particles
      :style="{height: windowHeight+'px'}"
      style="width: 100%; position: fixed;top: 0;left: 0;"
      color="#000"
      :particle-opacity="0.7"
      :particles-number="150"
      shape-type="circle"
      :particle-size="4"
      lines-color="#000"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="5"
      :hover-effect="true"
      hover-mode="grab"
      :click-effect="true"
      click-mode="push"
    /> -->
    <router-view />
  </div>
</template>

<script>
import { GetConfig } from '@/api/public'
export default {
  name: 'App',
  data() {
    return {
      windowHeight: document.documentElement.clientHeight
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    getConfig() {
      GetConfig({

      }).then((res) => {
        this.$store.state.public.config = res.data.Config
      })
    }
  }
}
</script>
<style>
img{
  max-width: 100%;
}
body p{
  color: #8e8e8e !important;
}
@media only screen and (max-width: 470px) {

    .el-message-box{
      width: 70% !important;
    }
    .el-notification{
      max-width: 80% !important;
    }
}
@media only screen and (max-width: 750px) {
    .el-dialog{
      width: 100%;
      margin-top: 0px !important;
    }
}
.te-md-splitter{
  width: 50% !important;
}
.mce-panel{
  overflow: auto;
}
.el-dialog{
  overflow: auto;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .mce-notification-error{
    display: none !important;
  }
  div.mce-edit-area{
    height: 400px !important;
    overflow: auto;
  }

</style>
